<!DOCTYPE html>
<!--[if lt IE 7 ]>
<html lang="en" class="ie ie6"><![endif]-->
<!--[if IE 7 ]>
<html lang="en" class="ie ie7"><![endif]-->
<!--[if IE 8 ]>
<html lang="en" class="ie ie8"><![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html lang="en"><!--<![endif]-->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <style type="text/css" media="screen">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            padding: 20px;
            font-family: helvetica;
            background-color: #eee;
            color: #666;
        }

        label {
            display: block;
            line-height: 1.5;
            font-weight: bold;
        }

        h1 {
            padding-bottom: 10px;
        }

        p {
            font-size: 12px;
            line-height: 1.5;
            padding-bottom: 10px;
        }

        #sample_form_wrapper {
            padding: 20px 0;
        }

        a:link, a:visited {
            color: #6D8BCD;
        }

        a:hover {
            text-decoration: none;
        }

        img {
            border: 0;
        }
    </style>

    <title>jQuery Coordinate Picker - Sample 1</title>
    <script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="coordinate_picker/jquery.coordinate_picker.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="coordinate_picker/styles/smodal/shadow.css" type="text/css" media="screen"
          charset="utf-8"/>

    <script type="text/javascript" charset="utf-8">
        jQuery(function ($) {
            $('#coordinate_picker').coordinate_picker({
                'lat_selector':'#lat',
                'long_selector':'#long'
            });
        });
    </script>
</head>

<body>

<h1>jQuery Coordinate Picker - Sample 1</h1>

<p>This sample uses the lat and long selectors parameters in the plugin to set the form fields to the coordinates
    selected.</p>

<div id="sample_form_wrapper">
    <form method="post">

        <p><a href="" id="coordinate_picker">Coordinate Picker</a></p>

        <p><label for="long">Long:</label><input type="text" name="long" value="" id="long"/></p>

        <p><label for="lat">Lat:</label><input type="text" name="lat" value="" id="lat"/></p>

    </form>
</div>

</body>
</html>
